'use strict';

// step 1 :获取基因的信息
/**
 * 后端给出的是
 * object {
 *      nucleolus：{
 *              up : 20
 *              down : 30
 *         },
 *     
 * }
 */

const geneData = {
    nucleolus:{
        up: 20,
        down: 15
    },
    nucleus:{
        up: 0,
        down:30
    },
    ribosome:{
        up:15,
        down:0
    },
    vesicle:{
        up:0,
        down:0
    },
    rer:{
        up:15,
        down:20
    },
    ser:{
        up:15,
        down:20
    },
    golgi:{
        up:30,
        down:1
    },
    mitochondrion:{
        up:10,
        down:0
    },
    cell_membrane:{
        up:0,
        down:20
    }

}

const organelle = [
    'nucleolus',
    'nucleus',
    'ribosome',
    'vesicle',
    'rer',
    'ser',
    'golgi',
    'mitochondrion',
    'cell_membrane'
]


// step 2 ： 获取图片细胞器的多边型
var url="http://localhost:8080/test3/cell.svg";
fetch(url)
    .then(r=>r.blob())
    .then(b=>{
        cell.addEventListener('load',e=> URL.revokeObjectURL(cell.data));
        cell.data = URL.createObjectURL(b);
    });

cell.onload = e => {
    // console.log("cell : ",cell);
    // step 1 : 从细胞模式svg中提取多边形
    var polygonsPoints = extractPolygonsPoints(cell);
    console.log("polygonsPoints : ",polygonsPoints);
    // step 2 : 在多边形中生成随即点
    var randomPointsInPolygons = generatePointsInPolygons(geneData,polygonsPoints);
    console.log("randomPointsInPolygons : ",randomPointsInPolygons);
    // step 3 : 将随机点画在图形中
    

    // var geneLayer = cell.contentDocument.getElementById("gene");
    var organelles = Object.getOwnPropertyNames(randomPointsInPolygons);
    
    
    for (let i=0;i<organelles.length;i++) {
        var pointsInOrganelle = randomPointsInPolygons[organelles[i]];
        for (let j=0;j<pointsInOrganelle.length;j++) {
            var cx = pointsInOrganelle[j][0];
            var cy = pointsInOrganelle[j][1];

            var pointNode = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            pointNode.setAttribute('cx', cx);
            pointNode.setAttribute('cy', cy);
            pointNode.r.baseVal.value = 0.5;
            pointNode.setAttribute('stroke-width', '1');
            pointNode.setAttribute('fill', 'green');
            cell.contentDocument.getElementById("gene").appendChild(pointNode);
        }
        
    }
}

